<template>
  <ExpandList
    class="product-list"
    :show-expand="showExpand"
    :handleExpandChange="handleExpand"
    :expand="false"
  >
    <template #default="{ expand }">
      <div
        class="product-list_item"
        v-for="(item, index) in getRows(props.list, expand)"
        :key="index"
      >
        <div class="w-full">
          <div class="flex">
            <div class="w-[120px]">
              <VText
                title="SKU"
                :value="item.combination_sku_info?.sku"
                :copy="true"
                type="button"
                @click="handleView(item)"
              ></VText>
            </div>
          </div>
          <div>
            <VText
              title="自定义SKU"
              :value="item.combination_sku_info?.custom_sku"
              :copy="true"
            ></VText>
          </div>
        </div>
      </div>
    </template>
  </ExpandList>
</template>

<script setup>
import ExpandList from "@/components/ExpandList/index.vue";
import { nextTick, watchEffect } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const props = defineProps({
  list: {
    type: [Array, String],
    default: [],
  },
  handleExpand: {
    type: Function,
    default: () => {},
  },
});

let showExpand = computed(() => props.list.length > 2);

const getRows = (items, expand) => {
  if (expand) return items;
  if (!items?.length) return [];
  if (items.length > 0 && items.length < 2) {
    return items;
  }
  if (!expand) {
    return items?.slice(0, 2);
  }
};

// 查看
const handleView = (row) => {
  router.push({
    path: "/task/product/detail",
    query: {
      spuId: row.spu_id,
    },
  });
};
</script>
<style scoped>
.product-list {
  position: relative;
}
.product-list_item {
  padding: 8px;
  box-sizing: border-box;
  border: 1px solid #e6e7e9;
  position: relative;
}
.product-list_item:first-child {
  border-radius: 4px 4px 0 0;
}

.product-list_item:last-child {
  border-radius: 0 0 4px 4px;
}
</style>
